<template>
  <div class="statistics-page">
    <el-container>
      <el-aside width="200px">
        <el-menu :default-active="activeMenu" class="el-menu-vertical-demo">
          <el-submenu index="1">
            <template slot="title">全区统计</template>
            <el-menu-item index="1-1">按年统计</el-menu-item>
            <el-menu-item index="1-2">按月统计</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">旗区统计</template>
            <el-menu-item index="2-1">按年统计</el-menu-item>
            <el-menu-item index="2-2">按月统计</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <div class="main-top">
          <el-form
            :inline="true"
            :model="formData"
            class="demo-form-inline"
            size="medium"
          >
            <el-form-item label="时间：">
              <el-date-picker
                v-model="selectedDate"
                type="monthrange"
                range-separator="至"
                start-placeholder="开始月份"
                end-placeholder="结束月份"
              >
              </el-date-picker>
            </el-form-item>
            <el-button type="primary" @click="handleStatistics">
              统计
            </el-button>
          </el-form>
        </div>

        <div class="main-bottom">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane
              v-for="(tab, index) in tabs"
              :key="index"
              :label="tab.label"
              :name="tab.name"
            >
              {{ tab.content }}
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Statistics",
  data() {
    return {
      activeMenu: "1-1", // 默认选中的菜单项
      showDatePicker: false, // 控制日期组件的显示与隐藏
      selectedDate: null, // 记录选择的日期
      activeName: "", // 当前选中的标签页名称
      formData: {},
      tabs: [], // 存储生成的标签页数据
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleStatistics() {
      // 获取用户选择的时间范围
      const startDate = this.selectedDate[0];
      const endDate = this.selectedDate[1];
      const startYear = startDate.getFullYear();
      const startMonth = startDate.getMonth() + 1;
      const endYear = endDate.getFullYear();
      const endMonth = endDate.getMonth() + 1;

      // 清空之前的标签页数据
      this.tabs = [];

      // 遍历时间范围，生成标签页数据
      for (let year = startYear; year <= endYear; year++) {
        let start = year === startYear ? startMonth : 1;
        let end = year === endYear ? endMonth : 12;

        for (let month = start; month <= end; month++) {
          
          // 调用接口获取数据
          this.getData(year, month);
        }
      }
    },
    getUser() {
      this.$api
        .getUser()
        .then((response) => {
          console.log('用户信息',response);
          const xzqhdm = response.data.data.areacode;
          // 在获取到行政区划代码后，可以调用 handleStatistics 方法来重新加载数据
          this.handleStatistics();
        })
        .catch((error) => {
          // 处理错误
          console.error(error);
        });
    },
    getData(year, month) {
      // 调用接口获取数据
      const tjsj = `${year}-${month}`;
      const xzqhdm = ""; // 你需要设置相应的行政区划代码参数

      this.$api
        .monthlyMeanData(tjsj, xzqhdm) // 假设数据接口为 getData，并接收 tjsj 和 xzqhdm 作为参数
        .then((response) => {
          // 假设接口返回的数据为标签页内容
          const label = `${year}年${month}月`;
          const name = `${year}-${month}`;
          const content = response.data; // 假设接口返回的数据就是标签页内容
          this.tabs.push({ label, name, content });

          // 默认选中第一个标签页
          if (!this.activeName) {
            this.activeName = name;
          }
        })
        .catch((error) => {
          // 处理错误
          console.error(error);
        });
    },
  }
};
</script>

<style scoped>
.statistics-page {
  height: 100%;
  background-color: #f5f7fa; /* 设置页面背景色 */
}

.el-menu {
  background-color: #f0f2f5; /* 设置菜单背景色 */
}

.el-menu-item,
.el-submenu__title {
  color: #333; /* 设置菜单项文字颜色 */
}

.el-menu-item:hover,
.el-submenu__title:hover {
  background-color: #e4e7ec; /* 设置菜单项悬停背景色 */
}

.el-submenu {
  background-color: #d3dce6; /* 设置子菜单背景色 */
}

.el-submenu__title {
  color: #333; /* 设置子菜单标题文字颜色 */
}

.el-main {
  padding-left: 20px !important; /* 添加左边距 */
  background-color: #fff;
  margin: 20px !important; /* 使用 !important 强制应用边距样式 */
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 如果需要调整侧边栏的宽度，可以在这里设置 */
.el-aside {
  width: 220px;
}

.main-top {
  height: 40px;
  margin-bottom: 20px;
}
</style>
